<style lang="less">
  .chest-pain-chart{
    width: 100%;
    height: 100%;
    position: relative;
    .chart {
      width: 100%;
      height: 100%;
    }
    .chart-icon{
      z-index: 999;
      cursor: pointer;
      font-size: 20px;
      color: #54647D;
      position: absolute;
      bottom: 5px;
      right: 30px;
    }
    .el-dialog__body{
      height: 600px;
    }
    .dialog-content{
      width: 100%;
      height: 100%;
      padding: 0 25px;
      &-zuo{
        cursor: pointer;
        z-index: 999;
        position: absolute;
        left: 40px;
        top: 50%;
      }
      &-you{
        cursor: pointer;
        z-index: 999;
        position: absolute;
        right: 40px;
        top: 50%;
      }
      &-header{
        color: #333333;
        font-size: 24px;
        text-align: center;
        line-height: 24px;
      }
      &-chart{
        width: 100%;
        height: ~'calc(100% - 24px)';
      }
    }
  }
</style>

<template>
  <div class="chest-pain-chart">
    <div ref="chart" class="chart" />
    <i class="el-icon-zoom-in chart-icon" @click="clickIcon" />
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%">
      <div class="dialog-content">
        <div class="dialog-content-zuo" @click="clickZuo">
          <img src="../../images/dashboard/zuohua.png" alt="">
        </div>
        <div class="dialog-content-header">{{ chartIndex + 1 }}、{{ singleChartData.name }}</div>
        <div ref="dialogChart" class="dialog-content-chart" />
        <div class="dialog-content-you" @click="clickYou">
          <img src="../../images/dashboard/youhua.png" alt="">
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'QualityChart',
  props: {
    chartData: {
      type: Object,
      default: null
    },
    singleChartData: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      chartIndex: 0,
      sigleChart: null
    }
  },
  mounted() {
    this.getChart()
  },
  methods: {
    getChart() {
      const chartLine = this.$refs.chart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data: [{
            name: '指标值',
            icon: 'rect'
          }]
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#F3F3F9'
              }
            },
            axisLabel: {
              color: '#666666'
            },
            data: this.chartData.timeData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.chartData.unit,
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ['#F3F3F9']
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '指标值',
            barWidth: 20,
            type: 'bar',
            itemStyle: {
              color: '#4380EA'
            },
            data: this.chartData.targetData
          }
        ]
      }
      if (chartLine) {
        const myChart = echarts.init(chartLine)
        myChart.setOption(option)
      }
    },
    getSigleChart() {
      const chartLine = this.$refs.dialogChart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data: [{
            name: '指标值',
            icon: 'rect'
          }]
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#F3F3F9'
              }
            },
            axisLabel: {
              color: '#666666'
            },
            data: this.singleChartData.optionData.timeData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.chartData.unit,
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ['#F3F3F9']
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '指标值',
            type: 'bar',
            itemStyle: {
              color: '#4380EA'
            },
            barWidth: 20,
            data: this.singleChartData.optionData.targetData
          }
        ]
      }
      if (chartLine) {
        this.sigleChart = echarts.init(chartLine)
        this.sigleChart.setOption(option)
      }
    },
    clickIcon() {
      this.dialogVisible = true
      this.chartIndex = this.index
      this.$emit('clickIcon', this.chartIndex)
      this.$nextTick(() => {
        this.getSigleChart()
      })
    },
    clickZuo() {
      this.$emit('clickZuo', this.chartIndex)
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index
        this.getSigleChart()
      })
    },
    clickYou() {
      this.$emit('clickYou', this.chartIndex)
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index
        this.getSigleChart()
      })
    }
  }
}
</script>
